<template>
  <!--
    作者：luoyiming
    时间：2020-06-04
    描述：插件中心-直播-直播房间列表-修改
  -->
    <div title="編輯直播間" >
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
         <el-form-item label="直播間名稱" prop="name">
           <el-input v-model="ruleForm.name" ></el-input>
         </el-form-item>

          <el-form-item label="直播封面圖" prop="coverImgId">
          <div>
            <el-button type="primary" @click="openUpload('cover')">上傳圖片</el-button>
            <img :src="coverImgPath" class="mt10" :width="120" v-if= "ruleForm.coverImgId!=''" />
            <div class="gray9">建議尺寸1080*1920，大小不超過2M</div>
            <!--上传图片组件-->
            <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上傳圖片</Upload>
          </div>
          </el-form-item>

         <el-form-item label="直播時間">
           <el-col :span="11">
             <el-form-item prop="startTime">
              <el-date-picker
                 v-model="ruleForm.startTime"
                 type="datetime"
                 format="YYYY-MM-DD HH:mm:ss"
                 value-format="YYYY-MM-DD HH:mm:ss"
                 placeholder="選擇開始時間">
               </el-date-picker>
             </el-form-item>
           </el-col>
           <!-- <el-col class="line" :span="2">-</el-col> -->
           <el-col :span="11">
             <el-form-item prop="endTime">
               <el-date-picker
                  v-model="ruleForm.endTime"
                  type="datetime"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="選擇結束時間">
                </el-date-picker>
             </el-form-item>
           </el-col>
         </el-form-item>

       <el-form-item label="主播暱稱" prop="anchorName">
         <el-input v-model="ruleForm.anchorName	"></el-input>
       </el-form-item>

       <el-form-item label="主播微信號" prop="anchorWechat">
         <el-input v-model="ruleForm.anchorWechat	"></el-input>
       </el-form-item>

       <el-form-item label="直播分享圖" prop="shareImgId">
         <div>
           <el-button type="primary" @click="openUpload('share')">上傳圖片</el-button>
           <img :src="shareImgPath" class="mt10" :width="120" v-if= "ruleForm.shareImgId!=''" />
           <div class="gray9">建議像素800*640，大小不超過1M</div>
           <!--上传图片组件-->
           <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上傳圖片</Upload>
         </div>
       </el-form-item>
       <el-form-item label="購物直播頻道封面圖" prop="feedsImgId">
         <div>
           <el-button type="primary" @click="openUpload('feeds')">上傳圖片</el-button>
           <img :src="feedsImgPath" class="mt10" :width="120" v-if= "ruleForm.feedsImgId!=''" />
           <div class="gray9">建議像素800*800，大小不超過100KB</div>
           <!--上传图片组件-->
           <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上傳圖片</Upload>
         </div>
       </el-form-item>
<!--       <el-form-item label="推流类型" prop="type">
         <el-radio-group v-model="ruleForm.type">
           <el-radio :label = "0" >手机直播</el-radio>
           <el-radio :label = "1" >推流</el-radio>
         </el-radio-group>
       </el-form-item> -->
       <el-form-item label="是否開啟點讚" prop="closeLike">
         <el-radio-group v-model="ruleForm.closeLike">
           <el-radio :label = "0" >開啟</el-radio>
           <el-radio :label = "1" >關閉</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="是否開啟直播貨架" prop="closeGoods">
         <el-radio-group v-model="ruleForm.closeGoods">
           <el-radio :label = "0" >開啟</el-radio>
           <el-radio :label = "1" >關閉</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="是否開啟評論" prop="closeComment">
         <el-radio-group v-model="ruleForm.closeComment">
           <el-radio :label = "0" >開啟</el-radio>
           <el-radio :label = "1" >關閉</el-radio>
         </el-radio-group>
       </el-form-item>
     </el-form>
    <div>
      <el-button type="primary" @click="submit('ruleForm')" :loading="loading">提交</el-button>
    </div>
  </div>
</template>

<script>
import wxLiveApi from '@/api/wxlive.js';
import Upload from '@/components/file/Upload.vue';
export default {
  components: {
    /*图片上传*/
    Upload: Upload
  },
  data() {
    return {
      /*是否上传图片*/
      isupload: false,
      isImg: false,
      type: '',
      coverImgPath: '',
      shareImgPath: '',
      feedsImgPath: '',
      auditRemark: '',
      liveId: 0,
      ruleForm: {
        name: '',
        coverImgId: 0,
        startTime: '',
        endTime: '',
        anchorName: '',
        anchorWechat: '',
        shareImgId: '',
        feedsImgId: '',
        type: '',
        closeLike: '',
        closeGoods: '',
        closeComment: '',
        auditStatus: 0
      },
      rules: {
        name: [{
          required: true,
          message: "請輸入直播間名稱",
          trigger: 'blur'
        }, {
          min: 3,
          max: 17,
          message: "長度在 3 到 17 個字符",
          trigger: 'blur'
        }],
        anchorName: [{
          required: true,
          message: "請輸入主播暱稱",
          trigger: 'blur'
        }, {
          min: 3,
          max: 15,
          message: "長度在3到15個字符",
          trigger: 'blur'
        }],
        anchorWechat: [{
          required: true,
          message: "請輸入主播微信號",
          trigger: 'blur'
        }],
        coverImgId: [{
          required: true,
          message: "請選擇封面圖片",
          trigger: 'change'
        }],
        shareImgId: [{
          required: true,
          message: "請選擇分享圖片",
          trigger: 'change'
        }],
        feedsImgId: [{
          required: true,
          message: "請選擇購物直播頻道封面圖",
          trigger: 'change'
        }],
        startTime: [{
          required: true,
          message: "請選擇開始時間",
          trigger: 'change'
        }],
        endTime: [{
          required: true,
          message: "請選擇結束時間",
          trigger: 'change'
        }],
        type: [{
          required: true,
          message: "請選擇推流類型",
          trigger: 'change'
        }],
        closeLike: [{
          required: true,
          message: "請選擇是否開啟點讚",
          trigger: 'change'
        }],
        closeGoods: [{
          required: true,
          message: "請選擇是否開啟直播貨架",
          trigger: 'change'
        }],
        closeComment: [{
          required: true,
          message: "請選擇是否開啟評論",
          trigger: 'change'
        }]
      },
      /*左边长度*/
      formLabelWidth: '120px',
      loading: false
    };
  },
  created() {
    /*获取列表*/
    this.liveId = this.$route.query.liveId;
    this.getData();
  },
  methods: {
    /**
     * 获取基础数据
     */
    getData: function () {
      let self = this;
      wxLiveApi.toEdit({
        liveId: self.liveId
      }).then(res => {
        self.ruleForm = res.data;
        self.coverImgPath = res.data.coverImgPath;
        self.shareImgPath = res.data.shareImgPath;
        self.feedsImgPath = res.data.feedsImgPath;
      }).catch(error => {
        self.loading = false;
      });
    },
    submit(formName) {
      let self = this;
      self.$refs[formName].validate(valid => {
        if (valid) {
          let param = self.ruleForm;
          param.liveId = self.liveId;
          wxLiveApi.editRoom(param).then(data => {
            ElMessage({
              message: "操作成功",
              type: 'success'
            });
            this.$router.back(-1);
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*上传图片*/
    uploadFile(fileId) {
      let self = this;
      const loading = ElLoading.service({
        lock: true,
        text: "文件上傳中，請等待",
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      wxLiveApi.uploadFile({
        fileId
      }, err => {
        loading.close();
      }).then(response => {
        loading.close();
        ElMessage({
          message: "上傳文件至微信成功",
          type: 'success'
        });
      }).catch(response => {
        loading.close();
      });
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        if (this.type == 'cover') {
          this.coverImgPath = e[0].filePath;
          this.ruleForm.coverImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.coverImgId);
        } else if (this.type == 'share') {
          this.shareImgPath = e[0].filePath;
          this.ruleForm.shareImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.shareImgId);
        } else if (this.type == 'feeds') {
          this.feedsImgPath = e[0].filePath;
          this.ruleForm.feedsImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.coverImgId);
        }
      } else {}
      this.isupload = false;
    }
  }
};
</script>

